<template>
  <view class="container">
    <view class="list">
      <view class="box">
        <view class="row">
          <view class="text2">承办单位：</view>
          <view class="right">
            <view class="name">{{ info.company_info.company_name }}</view>
            <view class="type">{{ info.company_info.type }}</view>
          </view>
        </view>
        <view class="row">
          <view class="text2">适用对象：</view>
          <view class="right">
            <view class="desc">{{ info.project_info.applicable_objects }}</view>
          </view>
        </view>
        <view class="row">
          <view class="text2">联系人：</view>
          <view class="right">
            <view class="desc">{{ info.project_info.head_name }}，{{ info.project_info.head_mobile }}</view>
          </view>
        </view>
      </view>
      <view class="box">
        <view class="row">
          <view class="text2">岗位名称：</view>
          <view class="right">
            <view class="name">{{ info.post_info.name }}</view>
            <view class="info-box">
              <view class="type">上限：{{ info.post_info.max_count }}</view>
              <view class="type">报名：{{ info.post_info.join_count }}</view>
            </view>
          </view>
        </view>
        <view class="row">
          <view class="text2">辅导员：</view>
          <view class="right">
            <view class="desc">{{ info.post_info.counsellor_name }}、{{ info.post_info.counsellor_unit }}</view>
          </view>
        </view>
        <view class="row">
          <view class="text2">体验时间：</view>
          <view class="right">
            <view class="desc">{{ info.post_info.time }}</view>
          </view>
        </view>
      </view>

      <view class="box">
        <view class="row">
          <view class="text2">学生姓名：</view>
          <view class="right">
            <view class="name">{{ info.student_prove_info.username }}</view>
          </view>
        </view>
        <view class="row">
          <view class="text2">学生证：</view>
          <view class="right">
            <image class="img" :src="info.student_prove_info.xsz_img" mode="aspectFill"></image>
          </view>
        </view>
        <view class="row">
          <view class="text2">证件照片：</view>
          <view class="right" style="flex-direction: column; flex: none">
            <view class="images">
              <image class="img" :src="item.path" mode="aspectFill" v-for="(item,index) in info.student_prove_info.imgs" :key="index"></image>
            </view>
          </view>
        </view>
        <view class="btn" @click="postSignUp">立即提交</view>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      info: [],
      project_id: 0,
      post_id: 0
    }
  },

  onLoad(options) {
    var user_id = uni.getStorageSync('user_id'),
      {project_id, post_id} = options;

    this.project_id = project_id;
    this.post_id = post_id;

    this.$http.post('/index/Api/postJoinInfo', {user_id, project_id, post_id}).then(res => {
      if (res.data.result == 1) {
        this.info = res.data.data;
      } else {
        this.$common.doErrorResult(res);
      }
    })
  },

  methods: {
    postSignUp: function () {
      var user_id = uni.getStorageSync('user_id'),
        project_id = this.project_id,
        post_id = this.post_id;

      this.$http.post('/index/Api/postSignUp', {user_id, project_id, post_id}).then(res => {
        if (res.data.result == 1) {
          uni.showToast({
            title: res.data.msg,
            success: result => {
              setTimeout(() => {
                uni.navigateTo({
                  url: '/pages/my_post/my_post'
                }, 500)
              })
            }
          })
        } else {
          this.$common.doErrorResult(res);
        }
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  padding: 20rpx;
  background: #f5f5f5;

  .list {

    .box {
      display: flex;
      flex-direction: column;
      padding: 16rpx 24rpx;
      margin-bottom: 20rpx;
      background: #fff;
      border-radius: 20rpx;

      .title {
        font-size: 32rpx;
        font-weight: bold;
      }

      .row {
        display: flex;
        align-items: flex-start;
        margin-top: 14rpx;

        .text1 {
          font-size: 28rpx;
          width: 90rpx;
          font-weight: bold;
        }

        .text2 {
          font-size: 28rpx;
          width: 140rpx;
          font-weight: bold;
        }

        .right {
          min-width: 0;
          flex: 1;
          display: flex;
          align-items: flex-end;
          font-size: 24rpx;
          color: #3D3D3D;
          margin-left: 20rpx;

          .count {
            width: 100rpx;
          }

          .name {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .info-box {
            display: flex;
            justify-content: space-between;
            width: 230rpx;
            margin-left: 20rpx;
          }

          .type {
            background: #b574ff;
            padding: 2rpx 16rpx;
            border-radius: 10rpx;
            font-size: 18rpx;
            color: #fff;
          }

          .time {
            flex: 1;
          }

          .images {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 400rpx;
            height: 500rpx;
          }

          .img {
            width: 400rpx;
            height: 240rpx;
            margin-bottom: 20rpx;
          }
        }
      }

      .btn {
        font-size: 24rpx;
        color: #fff;
        background: #32a4ff;
        width: calc(100% - 40rpx);
        height: 60rpx;
        line-height: 60rpx;
        padding: 0 24rpx;
        border-radius: 50rpx;
        text-align: center;
        margin-top: 40rpx;
      }

    }
  }

}

</style>
